En Sohtanaka he visto un slider que me ha gustado, se trata de Automatic Image Slider jQuery y como bien puede apreciarse está creado con jQuery.
La aplicación consiste en utilizar HTML /CSS /Javascript el efecto sería el siguiente
No es complicado, sólo requiere dedicarle un mínimo de tiempo y atención, nos situamos justo antes de </head> y añadimos:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>

Justo después añadimos también el contenido de este archivo.
Los estilos del slider los añadimos justo antes de ]]></b:skin>

/*--Main Container--*/
.main_view {
float: left;
position: relative;
}
/*--Window/Masking Styles--*/
.window {
height:286px; width: 790px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {float: left;}

/*--Paging Styles--*/
.paging {
position: absolute;
bottom: 40px; right: -7px;
width: 178px; height:47px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
line-height: 40px;
background: url(url-imagen) no-repeat; /*--aquí va la imagen de la paginación--*/
display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {
font-weight: bold;
}

Por último en un gadget de HTML incluimos el código que contiene las imágenes.

<div class="main_view">

<div class="window">
<div class="image_reel">
<a href="url-enlace-1"><img src="url-imagen-1" alt="" /></a>
<a href="url-enlace-2"><img src="url-imagen-2" alt="" /></a>
<a href="url-enlace-3"><img src="url-imagen-3" alt="" /></a>
<a href="url-enlace-4"><img src="url-imagen-4" alt="" /></a>
</div>
</div>
<div class="paging">

<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
</div>
</div>

- En la parte superior donde dice url-enlace-1- 2- 3- 4 es el espacio donde podemos añadir la url si deseamos que al pulsar sobre la imagen nos dirija a otro sitio.
- De no desear un enlace dejamos sólo el código para imagen es decir, en lugar de:
<a href="url-enlace-1"><img src="url-imagen-1" alt="" /></a>
bastaría con <img src="url-imagen-1" alt="" />

- Donde dice url-imagen-1- 2- 3- 4 lo sustituimos por la url de cada imagen.
- Para añadir el slider sin necesidad de modificar las medidas lo ideal son imágenes de 790 X 296.-
- En los estilos donde dice: background: url(url-imagen-) no-repeat; /*--aquí va la imagen de la paginación--*/ es el lugar destinado para añadir una imagen de fondo en la paginación.
- Si no deseamos una imagen podemos sustituirla por color background-color:#000; o añadirle esquinas redondeadas como hicimos en otras ocasiones con border-radius
Ver ejemplo:

Maria Dic

:D gracias justo lo que ando buscando!
siempre usted dandome tanta información un abrazo
besos! (:

Responder
Oliver Gómez

¡Gracias Gem@!

Responder
Gem@

:: Me alegra que te guste Pink Punk Pum Diseños :)

:: Gracias por el comentario Oliver :)

Responder
Maite

Ohhh me encanta! parece flash! es un capricho jejeje seguro que lo uso aunque sea en el de pruebas. El tuyo para ver el ejemplo no está abierto al público Gema :P
Venía a consultar otra cosa y he parado aqui por la espectacularidad pero me voy pitando, besosss

Responder
Gem@

:: Gracias Maite ya abrí las puertas para que lo veas si aún estás por aquí ;)

Responder
Maite

He vuelto para cotillear :D me encanta, y además no me había dado cuenta que las imágenes cambiaban automáticamente y lo he descubierto con tu ejemplo!!!! No podré resistirme a probarlo :P

Responder
Unknown

Y si necesito agregar mas de 4 imagenes, se puede?
Y si tambien pueden cambiar automaticamente.

Responder
Unknown

Retiro la pregunta de si cambian en automatico, ya me di cuenta.

Responder
Bocha

URGENTE!!!!!

Tengo un problema en el blog y no se solucionarlo...!!

En casi todas las imagenes aparece un cuadrado tipo Link, y antes no se veia de esa forma.QUEDA MUY FEO Y LO QUIERO SACAR!

Mira esta imagen: http://img44.imageshack.us/img44/8320/4545234.png (ESE ES EL PROBLEMA)

Todo este problema comenzo cuando yo coloque la paginacion de las entradas, para suplantar los enlaces de navegacion. Cuando me di cuenta saque inmediatamente el codigo y el problema sigue igual.

QUE HAGO, ESTOY MUY PREOCUPADO.

Responder
Unknown

PiedrA PreciosA una beleza!

Lástima que aún no se han amigado las librerías ;)

Besos!

Responder
Gem@

:: Maite espero ver ese ejemplo del slider :)

:: Julio Palen no hay límite de imágenes, cada imagen sería una línea nueva es decir url-enlace-4, url-enlace-5, url-enlace-6
En ese caso sería conveniente darle anchura al espacio de la paginación en .paging donde dice width: 178px;

:: Bocha ¿de verdad piensas que ese borde es algo urgente? no quiero pensar que tuvieras de un problema de verdad serio en el blog :S
Ese borde de color verde se produce porque en los enlaces de post-footer, añade border:none y vemos si desaparece.
.post-footer a {
border: none !important;

Responder
Gem@

:: Si Graciela, es una pena esa enemistad ya podían hacer las paces un día de estos :)

Responder
Bocha
Este comentario ha sido eliminado por el autor.
Responder
Bocha

Ya esta, Rosa me lo pudo arreglar,

Tenia que poner a img{ border-width:0;}.

Igualmente gracias por tu tiempo Gema.

Saludos.

Responder
Gem@

:: Muy bien Bocha, pensaba que te referías sólo al borde verde en las imágenes del pos-footer (la flechita)
Me alegra esté solucionado.

Responder
Tanika

Hola Gem@, felicitarte una vez más por tu trabajo.
Tengo un problema!! cuando guardo la plantilla me da este mensaje:

Element type "script" must be followed by either attribute specifications, ">" or "/>".

Entiendo, que es problema del scrip, pero lo he repasado mil veces...
Hace poco quise introducir un efecto con jquery que al cargar la página del blog, se ponia una linea blanca en el centro y se habria como presentación,(Queryloader) pues no hubo manera, aparecía el mismo mensaje..

¿Puede ser que no sea compatible con algo que tenga en mi plantilla? Lo he probado con los dos blogs que tengo, y en ninguno ha funcionado.

Espero que puedas ayudarme, porque llevo 4 días con este tema y no consigo saber que es lo que hago mal!!

Responder
Gem@

:: Comprueba ahora Tania creo que era un error en las comillas del script al convertir el código ;)

Responder
Administrador

ESTUPENDO!!

pero tengo un problemilla... estoy creando un blog de prueba y cuando tenga la forma a mi gusto empezare a poner entradas...

y quiero poner esto de las imagenes, pero al hacerlo, se me ve perfectamente la imagen primera, pero las otras 3 NO SE ME VEN, y ni siquiera salen los numeritos 1, 2, 3, 4 como en el ejemplo tuyo... vaya que sólo puedo ver una imagen, es como si no hubiera echo el slider o como se llame

¿Qué he hecho mal? ¿Puede ser porque la plantilla que uso es descargada...?

Responder
Tanika

Así es, muchas gracias Gem@!!
Me has dejado bastante tranquila, pensaba que tenía algún problema en las plantillas,,
¿Crees que ha podido pasarme esto mismo cuando intenté introducir el efecto Queryloader?
Gracias!! :D

Responder
Gem@

:: DeLuxe no puedo saber que hiciste mal si no lo veo :S

:: Tania es posible que ocurra no sólo con ese error sino con otros muchos como cerrar mal una etiqueta o un código incorrecto.

Responder
Administrador

YA LO SOLUCIONE...

no se me veian los numeros porque las imagenes eran mas grandes ke el ancho de la pagina y se veian cortadas, pero ya va a la perfeccion! gracias por todoooo

Responder
Gem@

:: Estupendo :)

Responder
Soron

...eso precisamente lo que tenía en mente, justamente lo acabo de implementar en mi blog de pruebas y aunque me tomó un poco de tiempo (soy bastante novato) ha quedado bien; ahora solo resta ponerlo en mi blog principal.

...te agradezco tu tiempo y explicación.

Responder
Gem@

:: Gracias por el comentario Soron, me alegra que saliera bien :)

Responder
Soron

...es lo menos que puedo hacer Gem@. :$

...si gustas, puedes ir a mi blog para que veas cómo ha quedado. :P

Responder
Gem@

:: Ha quedado muy bien Soron, gracias :)

Responder
Tanika

Gracias Gem@!! La verdad es que no sé que haría sin tu blog!!

Responder
La hormiguita

Hola, perdón pero voy hacer algunas preguntas soy nueva en esto.... de poner slide...:$
Primero coloco :script,luego el archivo que se descarga, despues los estilos y ahí ya no entiendo bien hay en letra azul, url(url-imagen) no-repeat; /*--aquí va la imagen de la paginación--*/
???? no se que es.puedo poner el color y nada mas?
después que tome un gadget html, yo lo quiero para una entrada... si pongo eso en un gadget que se ve? donde se ve? en la entrada o en la sidebar? Perdón espero entiendas todas mis preguntas....

Responder
Gem@

:: La hormiguita en el slider se muestran imágenes y esas imágenes deben estar subidas antes a un servidor para tener la url de las mismas (el álbum de picasa sirve como alojamiento de imágenes) una vez la imagen está subida nos proporciona una url (dirección de la barra del navegador) pero ojo, la url de la imagen y no de la página donde se encuentra.
En la parte que dice url-imagen pegamos la url de la imagen.
Ahora bien, a la imagen que tu te refieres es a la que se muestra en el ejemplo que hace las veces de fondo de la paginación ahí si puedes poner color en lugar de la imagen.
Si lo quieres añadir en una entrada no hay problema siempre que el slider no sea más ancho que la entrada, si es en un gadget se verá donde añadimos ese gadget es decir donde tu arrastres o edites el gadget, igual que haces con los de la sidebar :)


:: Gracias a ti Tania :)

Responder
Administrador

Hola Gema, la verdad es que muy bonito este Slide, me vendrá bien para un blog de fotografías que estoy construyendo.

Un saludo y gracias.

Responder
Gem@

:: Es de lo más simple y fácil de instalar Eduardo seguro que quedará genial :)

Responder
Madonna mexico

hola gema una pregunta como se le puede añadir texto? como aparece en las paginas de ejemplo!"

Responder
Gem@

:: Madonna mexico a qué texto te refieres??

Responder
O-S

Hola, ayuda por favor, no se que hago mal. la imagen no pasan automaticamente. aki mi blog de pruba http://saifer83.blogspot.com/.

saludos

Responder
Gem@

:: Neoclom creo que te olvidaste de añadir el script :S

Responder
Andrés

Hola Gema, me gusta ese slide, te pregunto si se puede poner en una entrada en el blog, gracias por la respuesta,

Responder
Gem@

:: No hay problema alguno en ponerlo ANDRES ARMAS siempre y cuando no estés utilizando una librería distinta porque cuando se mezclan librerías suelen crear conflictos ;)

Responder
Andrés

Lo intente y no me salió, pero si lo pude hacer colocandole como gadjet(http://polopublicitario.blogspot.com), solo falto colocarle las medidas exactas, aunque lo que necesito es ponerlo en una entrada aqui(http://selectprint.blogspot.com/2010/02/galeria-flickr.html), podrias decirme que es lo que necesito poner en la entrada para que se pueda ver, el ancho para las entradas es de 555 segun mi plantilla, saludos.

Responder
O-S

Hola, Genm@. Gracias por dedicar tu tiempo a ayudar a primates como yo...:)..
Hablando de Slider, me tope con este http://workshop.rs/projects/coin-slider/, el cual me gustaría usar en mi blog, Crees que se pueda?!!!.

Responder
Gem@

:: ANDRES ARMAS en los estilos tendrías que modificar el ancho donde width: 790px para que nop sea más ancho que e espacio de las entradas y qu elas imágenes tampoco sean de mayor tamaño qu eel permitido.

.window {
height:286px; width: 790px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}

:: Neoclom sobre ese slider tiene Pizcos una entrada que explica como añadirlo:
http://humanossinsentido.blogspot.com/

Responder
O-S

ok. ya lo tengo... Gracias Genm@....:D

Responder
Gem@

:: Estupendo :)

Responder
Dj's Club

hola como ests :D, intente hacerlo, pero nose porq motivo no me sale la imagen y los numeros me salian en posicion vertical :( , ni ajustandolo al tamaño del blog q es 406 ancho.

Responder
Martín Rocha

Hola gema.
Lo aplique pero no se por que razon como que no se carga el script.
Como lo puedo solucionar gema?
Desde ya muchas gracias.
Martin

Responder
Martín Rocha

Perdon aclaro que este es el blog de pruevas donde lo aplique http://zonamruploader.blogspot.com/
Saludos.

Responder
Gem@

:: Añadiste el script de jquery.min.js ??

Responder
Gem@

:: Prueba con la etiqueta DATA añadiéndola de esta forma en el script. Ha sido un error mío :S

<script type='text/javascript'>
//<![CDATA[
aquí pones el script

//]]>
</script>

Responder
pancher

Hola Gem@, soy nuevo por aqui, muy buena página!
He conseguido hacer funcionar el slide pero tengo un problemilla :(
Tengo 4 fotos en el slide y cuando la segunda se activa, el numero de paginación (2) pasa delante del 1. Lo mismo me pasa con la 3 y 4.

Muchas gracias y espero que puedas echarme un cable.

Responder
Gem@

:: Tendría que verlo funcionando pancher :S

Responder
pancher
Este comentario ha sido eliminado por el autor.
Responder
pancher

@Gem@

Ok, este es el link de la prueba:



Prueba Slide

En la prueba la paginación está en color rojo . Fíjate como el numero de paginación que está activo cambia de posición.



Muchas gracias!

Responder
pancher
Este comentario ha sido eliminado por el autor.
Responder
Gem@

:: ¿Has probado en otro blog sin Prototype y Scriptaculous? yo lo intentaría porque no son compatibles ambas librerías.

Responder
pancher

La verdad es que no se que es Prototype y Scriptaculous :S
Lo he puesto en el blogger siguiendo los pasos que pone en el post.
Debería kitar algo del blog para que funcione?

Gracias

Responder
Gem@

:: Scriptaculous es una librería que se usa para añadir efectos, y jQuery es otra librería que se usa para el mismo fin. Usar las dos no es compatible y es lo que ocurre en tu plantilla que estás usando las dos librerías.
Scriptaculous lo tienes comentado y añadido como un script, yo me aseguraría de no estar dándole uso antes de eliminarlo.

Responder
pancher

Al final he conseguido que funcione como toca quitando otro slide que tenía funcionando, buscaré algo parecido en jquery para sustituirlo.

Muchas gracias por tu tiempo y ayuda Gema!

Responder
Gem@

:: Es mejor que te decidas por una u otra librería, y partiendo de ahí puedes añadir infinidad de efectos. jQuery es muy completa y una de las más usadas :)

Responder
Monica Custodio

:-)
Gema, guapa.
Estoy instalando esta maravilla en mi blog (http://blog.monicacustodio.com) pero no se me ve la cuarta foto. He probado muchas cosas, he copiado la tercera y la he puesto cuarta, etc..... pero en algún lugar hay un fallo! No se ......

En cuanto consiga que se vean las 4 fotos intentaré agrandar el tamaño para que se adapte mejor a mi blog.

Por otra parte comentarte que estoy preparando una cosita para ti ..... jiiiiii.
Besos

Responder
Monica Custodio

He vuelto a copiar-pegar todo y sigue sin verse la última imagen.
Si suprimo del gadget la imagen 4 para que se vean sólo 3 imágenes tampoco se ve la última.

O sea, el problema es con la última imagen sea cual sea.

Responder
Monica Custodio

:D Lo he conseguido solita, probando y probando y probando! Queda super! Gracias por estar ahí!

Responder
Gem@

:: Hola Mónica siento no haber estado para ayudarte, pero me alegra esté solucionado ;)

Responder
Monica Custodio

has visto qué bonito ha quedado? Estoy feliz!

Responder
Gem@

:: Más que bonito Mónica ¿has probado a añadir sombra a ese gadget ?
Algo como en esta plantilla:
http://btemplates.com/2011/blogger-template-archel/demo/

Responder
EpideMia

La verdad que es una pena lo de las librerias.

Lo probé en un blog de prueba y me quedo genial y muy ilusionado y contento lo fuia colocar en mi blog gasta que cai en que ya uso ByScripts.

empecé a entender todo esto de que había varias librerías cuando ya habia hecho varias cosas.

un dia de estos me voy a tomar el trabajo de pasar todo a una sola libreria. supongo que jQuery es la mas recomendable.

bueno gema, queria decirte que en el blog de prueba me funciono genial. muchas gracias, como siempre muy bueno tu trabajo.

Responder
Gem@

:: Es lo más recomendable EpideMia decidirse por una librería, jQuery está muy bien :D

Responder
EpideMia

sabes de algun efecto en jQuery que hago lo mismo que el acirdeon deslisante que tengo en mi blog??
epidemia-mella.blogspot.com

el efecto es de ByScripts.

si logro modificar eso voy a poder hacer varias cosas que hace rato tengo ganas.

ya hasta me da un poco de verguenza preguntarte tantas veces :$

de verdad de agradezco que nos ayudes tanto a los que menos sabemos

Responder
Monica Custodio

Gema, guapa!
Ya estoy por aquí!
Estoy intentando instalar el slide en el blog de un amigo pero mira cómo sale ..... www.knyi.blogspot.com
He instalado este slide mil veces así que no se qué sucede esta vez! Gracias!

Responder
Gem@

:: EpideMia lo de darte vergüenza no le veo motivo uno pregunta las veces que haga falta otra cosa es que no tenga respuesta porque ya quisiera yo tener solución para todo.
En estos casos lo que hago es intentar localizar la solución en otro sitio y proporcionar el enlace pero sigo en las mismas :S

:: Mónica hola!! sigo de cerca tus cambios ha quedado fantástico el sitio :D
Sobre el slider no veo nada extraño mira probé con lo que tu tienes en ese blog:
http://gemablogs.blogspot.com/
funciona perfectamente como verás, pero puedes intentar añadiendo el script de esta forma:
<script type='text/javascript'>
//<![CDATA[
Aquí añadimos el contenido de jquery.easing.1.3.js
//]]>
</script>

Responder
Monica Custodio

Muchas gracias Gemita, por tu ayuda y tus palabras!
Ya lo he solucionado. He empezado de cero y listos! funcionaba! A veces nos quieren volver locas!!!!! Gracias. Espero que estés bien .....

Responder
María Pilar

Me encanta este slider.Feliz domingo Gema. :)

Responder
Gem@

:: Todo prefecto Mónica :)

:: m.p.moreno es muy simple ya veces es ahí donde está la belleza :)

Responder
michel

hola como estan todos, no me funciona, no se que estoy haciendo mal, por favor alquien puede enviarme el ejemplo a mi email, perzmichel9@hotmail.com, gracias de antemano necesito hacer este slide....

Responder
Gem@

:: Lo siento michel el ejemplo está explicado en esta entrada, si me muestras donde lo añadiste vemos la posibilidad de solucionarlo :)

Responder
El pensador

Estimado, no puedo mas que FELICITARTE!!! Mis mas sinceras felicitaciones! IMPECABLE!!!!!!!!!

Responder
jmqnick

Hola Gema.
En primer lugar, gracias por ayudarnos a todos, imagino el esfuerzo que supone para ti.

Mi preguntas es la siguiente: ¿Es posible que aparezca el slide solamente en la pagina principal del blog, que cada vez que visitemos una entrada el slide se oculte?.

Lo tengo implementado en el blog de pruebas: http://jmqnick.blogspot.com/ a la espera de ajustar el slider e implantarlo en el blog definitivo: http://bloghtpc.blogspot.com/

Gracias.

Responder
Gem@

:: El pensador gracias :D

:: jmqnick Es posible hacer eso añadiendo condicionando para que solo se muestre en el home, añadimos la línea en negrita justo antes del html con los enlaces.
Sería algo así:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class="main_view">
<div class="window">
-------
-------
-------
</div>
</div>
</b:if>

(No te olvides que la etiqueta b:if debe cerrar)

Responder
jmqnick
Este comentario ha sido eliminado por el autor.
Responder
jmqnick
Este comentario ha sido eliminado por el autor.
Responder
jmqnick
Este comentario ha sido eliminado por el autor.
Responder
jmqnick

Perdón por monopolizarte los comentarios de la entrada.

Funciona perfectamente tu indicación, a la primera no me salio, ya que el código que me indicabas lo incluía en la vista diseño en el gadget html.

Hay que ir a la vista plantilla, edición html, expandir artilugios y pegar el código facilitado después de "" y el cierre de etiqueta después de ""

Saludos.

Responder
Anónimo
Este comentario ha sido eliminado por el autor.
Responder
Gem@

:: Así es jmqnick fue un olvido mio no decírtelo :S

Responder
Maca Ojeda

@Monica Custodio

Hola, sabes tengo el mismo problema, no se me ve la ultima imagen, me podrias decir como lo solucionaste?

Gracias

Responder
Juan Carlos

Enhorabuena por este slider, pero mi duda es porque me cae a la izquierda. Como puedo centrarlo porque he intentado y nada. Un saludo a Gema

Responder
Anónimo

/*--Main Container--*/
.main_view {
float: center;
position: relative;
}

prueba cambiando lo anterior juan carlos

(float: center;)

GRACIAS GEMA, ESTE SLIDER JQUERY CARGA MAS RAPIDO QUE EL QUE TENIA :D

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top